import React from 'react';
import { useEffect, useState } from 'react';
import { Button } from 'antd';
import axios from 'axios';
import './Mydesign.css'

const Mydesign = () => {
   const [designDatas, setDesignDatas] = useState([]);
   const [uid, setUid] = useState([]);
   const delDesign = (e) => {
      const ref = "http://192.168.72.166:8080/api/delUserDesignDatas" + e.currentTarget.id;
      axios.delete(ref
      ).then(res => {
         alert('删除成功', '', function () {
            window.location.reload();
         });
      })
   }
   useEffect(() => {
      axios.get("http://192.168.72.166:8080/api/getUsers")
         .then(res => {
            res.data.data.forEach(e => {
               if (e.user_name == localStorage.getItem('data')) setUid(e.user_id);
            })
         });
      axios.get("http://192.168.72.166:8080/api/getUserDesignDatas")
         .then(res => {
            setDesignDatas(res.data.data);
         });
   }, [])

   return (
      <div className="design_box">
         {
            designDatas.map((item) => {
               if (item.user_id == uid) {
                  return <div className='design_item'>
                     <img src={"http://192.168.72.166:8080/" + item.design_image} className='item_img' />
                     <div className='item_time'>{item.design_name}</div>
                     <Button className='del_button' id={item.design_id} type="dashed" onClick={delDesign} danger ghost>删除</Button>
                  </div>
               }
            })
         }
      </div>
   )
}

export default Mydesign;
